<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,
        th,
        td {
            border: 1px solid #eee;
            border-collapse: collapse;
        }

        th {
            background: #f5f4f4;
            color: #71777f;
        }

        th,
        td {
            padding: 10px;
        }

        /* button{
            cursor: pointer;
        } */

        .count {
            padding: 0 4px;
        }
    </style>
</head>

<body>
    <div id="app"></div>
    <script src="../vuejs/vue.js"></script>
    <template id="my-app">
        <template v-if="books.length>0">
            <table>
                <thead>
                    <th></th>
                    <th>书籍名称</th>
                    <th>出版日期</th>
                    <th>价格</th>
                    <th>购买数量</th>
                    <th>操作</th>
                </thead>
                <tbody>
                    <tr v-for="(book,index) in books">
                        <td>{{index+1}}</td>
                        <td>{{book.name}}</td>
                        <td>{{book.date}}</td>
                        <td>{{formatPrice(book.price)}}</td>
                        <td>
                            <button :disabled="book.count<=1" @click="decrement(index)">-</button>
                            <span class="count">{{book.count}}</span>
                            <button @click="increment(index)">+</button>
                        </td>
                        <td>
                            <button @click="removeBook(index)">移除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <h2>总价：{{formatPrice(totalPrice)}}</h2>
        </template>
        <template v-else>
            <h2>购物车为空~</h2>
        </template>
    </template>
    <script>
        Vue.createApp({
            template: `#my-app`,
            data() {
                return {
                    books: [
                        {
                            name: '《算法导论》',
                            date: '2006-9',
                            price: '85',
                            count: 1
                        },
                        {
                            name: '《UNIX编程艺术》',
                            date: '2006-2',
                            price: '59',
                            count: 1
                        },
                        {
                            name: '《编程珠玑》',
                            date: '2008-10',
                            price: '39',
                            count: 1
                        },
                        {
                            name: '《代码大全》',
                            date: '2006-3',
                            price: '128',
                            count: 1
                        },
                    ]
                }
            },
            computed: {
                totalPrice() {
                    let tPrice = 0;
                    this.books.forEach((book) => {
                        tPrice += book.price * book.count

                    });
                    return tPrice
                }
            },
            methods: {
                increment(index) {
                    this.books[index].count++;

                },
                decrement(index) {
                    this.books[index].count--;

                },
                removeBook(index) {
                    this.books.splice(index, 1)
                },
                formatPrice(price){
                    return '￥'+price;
                }
            }

        }).mount('#app')
    </script>
</body>

</html>